<template>
  <div>
    <div>
      <img :src="logo" alt />
    </div>
    <el-card :key="ct.id+'ct'" v-for="(ct,index) in paper.content">
      <template #header>
        <span>{{index+1}}、{{ct.outline_name}}</span>
      </template>
      <el-radio
        :key="it.id+'it'"
        v-for="it in paper.item"
        v-model="paper.content[index].answer"
        :label="it.item_name"
        :value="it.id"
      ></el-radio>
    </el-card>

    <div style="margin:10px">
      <el-button type="primary" @click="add">提交</el-button>
    </div>
  </div>
</template>
<script>
import logo from "../assets/logo.png";
export default {
  props: ["id"],
  data() {
    return {
      logo,
      paper: {}
    };
  },
  created() {
    this.getPaper();
  },
  methods: {
    async add() {
      for (let i = 0; i < this.paper.content.length; i++) {
        if (!this.paper.content[i].answer) {
          this.$message.error(`请填写第${i+1}项`);
          return;
        }
      }
      const result = await this.axios({
        method: "post",
        url: "/answers/add",
        data: {
          paper_id: this.id,
          content: JSON.stringify(this.paper.content),
          item: JSON.stringify(this.paper.item)
        }
      }).catch(() => {
        this.$message.error("请勿重复作答");
      });
      if (result) {
        this.$message.success("回答完毕");
      }
    },
    async getPaper() {
      const { data } = await this.axios({
        url: `/papers/${this.id}`
      });
      this.paper = data;
    }
  }
};
</script>